<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        form {
            width: 300px;
            margin: 100px auto;
            padding: 20px 0;
            background-color: #ddd;
            border-radius: 6px;
        }

        label {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding: 20px;
            text-align: justify;
        }

        input {

            vertical-align: middle;
        }

        input[type="submit"] {
            display: block;
            margin: 0 auto;
            margin-top: 20px;
            width: 60px;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <form action="">

        <label for="username">
            用户名
            <input type="text" name="username" id="username">
        </label>
    </form>


    <script>

        var elements = [
            { tag: 'input', text: '用户名', attr: { type: 'text', name: 'username' } },
            { tag: 'input', text: '密码', attr: { type: 'password', name: 'userpass' } },
            { tag: 'input', text: '确认密码', attr: { type: 'password', name: 'userpass_confirm' } },
            { tag: 'input', attr: { type: 'submit', value: '提交' } }
        ];

        function Generate(elements) {
            var str = '';
            for (var i = 0; i < elements.length; i++) {
                if (elements[i].tag == 'input') {
                    str += inputStr(elements[i]);//   生成input标签的函数
                }
            }
            return str;
        }

        //input函数
        function inputStr(value) {

            console.log(value.attr.type);
            if (value.attr.type == 'text') {
                str = "<label for='" + value.attr.name + "'>" + value.text + "<input type='" + value.attr.type + "' name='" + value.attr.name + "' id='" + value.attr.name + "' >" + "</label >";
            } else if (value.attr.type == 'password') {
                str = "<label for='" + value.attr.name + "'>" + value.text + "<input type='" + value.attr.type + "' name=" + value.attr.name + "' id='" + value.attr.name + "' >" + "</label >";
            } else if (value.attr.type == 'submit') {
                str = "<input type='" + value.attr.type + "' value='" + value.attr.value + "' >";
            }
            return str;
        }

        var form = document.querySelector('form');
        form.innerHTML = Generate(elements);
        console.log(form.innerHTML);

    </script>

</body>

</html>